2024-08-08
동적ㆍ반응형 시각화
지리공간적 시각화
JavaScript Library
자바스크립트 프로그래밍 언어를 사용하여 웹 개발을 더 쉽고 효율적으로 할 수 있도록 도와주는 재사용 가능한 코드 모음
동적 웹 페이지를 제작을 위한 다양한 기능과 도구를 제공
HTML의 script 태그를 통해 웹사이트에 막바로 임베드할 수 있음
R의 래퍼(wrapper) 패키지를 통해 손쉽게 사용 가능
https://www.geeksforgeeks.org/javascript-libraries-for-data-visualization/
동적ㆍ반응형 시각화가 구현되어 있는 웹사이트를 불러와 내재화
HTML의 iframe 태그 활용
테이블 역시 시각화의 일부
데이터 변형 및 요약을 거친 테이블
시각성이 가미된 테이블
인트렉티브 테이블
DT: R 래퍼 패키지
DT의 기능
Pagination: 페이지를 이동할 수 있는 기능
Instant search: 즉각적인 찾기 기능(Search에 타이핑하기 시작하면 즉각적으로 검색 결과 보여줌)
Multi-column ordering: 다중 컬럼 정렬 기능(컬럼 하나를 선택한 후 ctrl을 누를 상태에서 다른 컬럼을 선택)
Filtering: 값을 정렬할 수 있는 기능
Editable: 셀 값을 수정할 수 있는 기능
Buttons: 셀 숨기기, CSV, PDF, XLSX 등의 확장자로 내보내기 등을 수행하는 버튼 생성 기능
자바스크립트 라이브러리
D3 (https://d3js.org/)
Highcharts (https://www.highcharts.com/)
ECharts (https://echarts.apache.org/)
dygraphs (https://dygraphs.com/)
R 랩퍼 패키지
plotly
Plotly (https://plotly.com/graphing-libraries/)
R wrapper package: plotly package (https://plotly.com/r/)
ggplotly() function
plotly
plotly
ggplotly()
gganimate
형상(기하, 도형, 공간) 데이터 + 속성 데이터
형상 데이터
행정구역 경계와 같은 지리공간적 객체 자체에 대한 데이터
버텍스(vertex)의 좌표값을 가진 데이터
포인트(점), 라인(선), 폴리곤(역)의 형상으로 표출
속성 데이터
지리공간적 객체가 보유한 속성
기존 일반 데이터와 동일
조인: left_join() 함수
왼편: 형상 데이터
오른편: 속성 데이터
셰이프 파일(shape file): 가장 널리 사용되는 형상 데이터
sigungu.shp: 버텍스의 좌표값이 포함된 핵심 파일
sigungu.shx: 공간적 인덱싱 파일
sigungu.dbf: 기본 속성 파일
sigungu.prj: 투영 정보 파일
특수한 패키지 필요: sf 패키지
st_read() 함수sf 패키지sf 패키지world_map <- ggplot() +
geom_sf(data = world_data, aes(fill = TFR, text = name_long)) +
coord_sf(crs = "+proj=robin") +
scale_fill_viridis_c() +
scale_x_continuous(breaks = seq(-180, 180, 30)) +
scale_y_continuous(breaks = c(-89.5, seq(-60, 60, 30), 89.5)) +
theme(
panel.background = element_rect("white"),
panel.grid = element_line(color = "gray80")
)
world_map
sido_shp <- st_read("sido.shp", options = "ENCODING=CP949")
sigungu_data <- sigungu_data |>
mutate(
index_class = case_when(
index < 0.2 ~ "1",
index >= 0.2 & index < 0.5 ~ "2",
index >= 0.5 & index < 1.0 ~ "3",
index >= 1.0 & index < 1.5 ~ "4",
index >= 1.5 ~ "5"
),
index_class = fct(index_class, levels = as.character(1:5))
)
class_color <- c("1" = "#d7191c", "2" = "#fdae61",
"3" = "#ffffbf", "4" = "#a6d96a",
"5" = "#1a9641")
ggplot_map <- ggplot() +
geom_sf(data = sigungu_data, aes(fill = index_class, text = SGG1_FNM), show.legend = TRUE) +
geom_sf(data = sido_shp, fill = NA, lwd = 0.5) +
scale_fill_manual(name = "Classes",
labels = c("< 0.2", "0.2 ~ 0.5", "0.5 ~ 1.0",
"1.0 ~ 1.5", ">= 1.5"),
values = class_color, drop = FALSE)
ggplot_map
library(ggiraph)
sigungu_data <- sigungu_data |>
mutate(
index = format(index, digits = 4, nsmall = 4),
my_tooltip = str_c("Name: ", SGG1_FNM, "\n Index: ", index)
)
gg <- ggplot() +
geom_sf_interactive(
data = sigungu_data,
aes(
fill = index_class,
tooltip = my_tooltip,
data_id = SGG1_FNM
),
show.legend = TRUE) +
geom_sf(data = sido_shp, fill = NA, lwd = 0.5) +
scale_fill_manual(
name = "Classes",
labels = c("< 0.2", "0.2 ~ 0.5", "0.5 ~ 1.0", "1.0 ~ 1.5", ">= 1.5"),
values = class_color, drop = FALSE)
girafe(ggobj = gg) |>
girafe_options(
opts_hover(css = "fill: gray")
)leaflet: 자바스크립트 라이브러리leaflet: 단순 일반도leaflet: 매시업(mashup) 지도
사회과 예비교사를 위한 AIㆍ디지털 역량강화 워크숍